import React, { Component } from 'react'
// 导入自己的fetch
import { myGet, myPost } from '../myFetch';

export default class Index extends Component {
  constructor() {
    super();
    this.state = {
      list: []
    }
  }
  // 发请求
  getData() {
    this.http('/api/menulist')
      .then(res => {
        // console.log(res.data.list);
        this.setState({
          list: res.data.list
        })
      })
      .catch(err => {
        console.log(err);
      })
  }
  postData() {
    this.http.post('/api/menuedit', {
      // 随意写的乱数据
      id: 'lhwherfu345',
      pid: '43hj'
    })
      .then(res => {
        console.log(res);
      })
      .catch(err => {
        console.log(err);
      })
  }
  // 通过fetch发送get请求
  getDataFetch() {
    fetch('/api/menulist')
      .then(res => {
        return res.json()
      })
      .then(res => {
        console.log('fetch的数据：', res.list);
      })
      .catch(err => {
        console.log(err);
      })
  }
  // 通过fetch发送post请求
  postDataFetch() {
    let data = {id: 'lhwherfu345',pid: '43hj'};
    fetch('/api/menuedit', {
      // 请求的方法
      method: 'POST',
      body: JSON.stringify(data)
    })
      .then(res => {
        return res.json()
      })
      .then(res => {
        console.log('fetch的数据：', res);
      })
      .catch(err => {
        console.log(err);
      })
  }
  // 自己封装的get请求
  myGetDataFetch() {
    myGet('/api/menulist')
      .then(res => {
        console.log(res.list);
      })
      .catch(err => {
        console.log(err);
      })
  }
  // 自己封装的post
  myPostDataFetch() {
    myPost('/api/menuedit', {id:'98vg', pid: '94wjnt'})
    .then(res => {
      console.log(res);
    })
    .catch(err => {
      console.log(err);
    })
  }
  componentDidMount() {
    this.getData();
  }
  render() {
    return (
      <div>
        <p>我是首页</p>
        <button onClick={()=>this.getData()}>get</button>
        <button onClick={()=>this.postData()}>post</button>
        <hr />
        <button onClick={()=>this.getDataFetch()}>get-fetch</button>
        <button onClick={()=>this.postDataFetch()}>post-fetch</button>
        <hr />
        <button onClick={()=>this.myGetDataFetch()}>myGet</button>
        <button onClick={()=>this.myPostDataFetch()}>myPost</button>
        {
          this.state.list.map(item => {
            return (
              <p key={item.id}>{item.title}</p>
            )
          })
        }
      </div>
    )
  }
}
